<template>
    <div class="man-main">
        <div  v-for="(list,listindex) in boyRanking.default" :key="listindex">
            <div class="header" v-if="list.books.length">
                <span class="line" :class="lineBgColor[listindex]"></span><span class="plate-title">{{list.ranking_title}}</span>
                <nuxt-link :to="{path:'/bookstore/manDetail',query:{gender:sexStr,type:list.ranking_type,title:list.ranking_title}}" class="see-plate">查看榜单</nuxt-link>
            </div>
            <div class="content" v-if="list.books.length">
                <div class="left" v-for="(item,index) in list.books" :key="index">
                    <nuxt-link :to="'/novelDetail/'+item.book_id" :title="item.name">
                        <img class="novel-icon" :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null" >
                        <p class="novel-name ellipsis">{{item.name}}</p>
                        <p class="novel-author ellipsis">{{item.author}}</p>
                    </nuxt-link>
                </div>
            </div>
        </div>
       
        <div>
            <div class="header">
                <span class="line other-line"></span><span class="plate-title">其他排行榜</span>
            </div>
            <div class="other-content">
                <ul>
                    <li>
                        <nuxt-link :to="{path:'/bookstore/otherDetail',query:{ranking_id:item.ranking_id}}" class="align-center" v-for="(item,index) in boyRanking.other" :key="index">
                            <img class="other-icon" :src="item.ranking_icon" :alt="item.ranking_name">
                            <span class="title">{{item.ranking_name}}</span>
                            <i class="more"></i>
                        </nuxt-link>
                    </li>
                    
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  export default {
     props:{
        manRanking: {
            type: Object,
            default: function () {
                return {}
            }
        },
        sexStr: {
            type: String
        }
    },
    data () {
      return {
          lineBgColor: ['hot-line','collection-line','retain-line','end-line'],
          boyRanking: {}
      }
    },
    created() {
        this.boyRanking = this.manRanking
    },
    methods: {
        
    }
  }
</script>
